<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .button{
      background-color: #f4511e;
      color: #FFFFFF;
      width: 200px;
      height: 100px;
      border-radius: 5px;
      padding:25px;
      font-size: 30px;
    }
    .button span {
      cursor: pointer;
      display: inline-block;
      position: relative;
      transition: 0.5s;
    }
    .button span:after{
      content: ">>";
      opacity: 0;
      position: absolute;
      right: -20px;
      top: 0;
      transition: 1s;
    }
    .button:hover span{
      padding-right:30px ;
    }
    .button:hover span:after{
      right:-8px;
      opacity: 1;
    }

  </style>
</head>
<body>
<button class="button" style="vertical-align: center"><span>hover</span></button>
</body>
</html>
